<template>
  <div class="home-head">
    <el-card>
      <el-row type="flex" justify="space-between" align="middle">
        <el-col :span="6">
          <h1>淘气电影</h1>
        </el-col>
        <el-col :span="6">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
            <img :src="server+avatar" alt="" />
              {{adminName}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>用户信息</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('admin', ['adminName', 'avatar'])
  },
  data () {
    return {
      server: 'http://localhost:3000'
    }
  },
  methods: {
    ...mapActions('admin', ['logout'])
  }
}
</script>

<style lang="less">
.home-head {
  .el-header {
    height: 90px;
  }
  h1 {
    font-size: 24px;
    font-weight: bold;
  }
 .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
  img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translate(0, -50%);
  }
}
</style>
